<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CLOCK!</title>
    <style>
        *, *:after, *:before {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            background-image: url('index005/clock-bg.jpg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            height: 100vh;
            display: grid;
            justify-content: center;
            align-items: center;
        }

        .main-color {
            background-color: #1696D5;
        }

        .second-color {
            background-color: #582733;
        }

        /* START CLOCK STYLE */
        .clock {
            height: 400px;
            width: 400px;
            border: 5px solid #000;
            border-radius: 50%;
            position: relative;
            text-align: center;
            background-color: #181717;
            box-shadow: 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);
        }

        .clock .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
        }

        .clock .twelve {
            position: absolute;
            width: 3px;
            height: 15px;
            left: 0;
            top: 0;
            right: 0;
            margin: 0 auto;
        }

        .clock .two {
            position: absolute;
            width: 15px;
            height: 3px;
            right: 10px;
            margin: auto 0;
        }

        .clock .three {
            position: absolute;
            width: 15px;
            height: 3px;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto 0;
        }

        .clock .six {
            position: absolute;
            width: 3px;
            height: 15px;
            left: 0;
            bottom: 0;
            right: 0;
            margin: 0 auto;
        }

        .clock .nine {
            position: absolute;
            width: 15px;
            height: 3px;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto 0;
        }

        .clock .line {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform-origin: bottom;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

        .clock #secLine {
            height: 170px;
            width: 3px;
            bottom: 170px;
            z-index: 3;
        }

        .clock #minLine {
            width: 7px;
            height: 120px;
            bottom: 120px;
            transform-origin: bottom;
            z-index: 2;
        }

        .clock #hourLine {
            width: 10px;
            height: 80px;
            bottom: 80px;
            z-index: 1;
        }

        /* START LINKS STYLE */
        button {
            background-color: #1696D5;
            border: none;
            outline: none;
            color: #fff;
            padding: 10px 30px;
            width: 40%;
            margin: 0 auto;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease 0s;
        }

        button:hover {
            background-color: #2EE59D !important;
            box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4) !important;
            color: #fff !important;
        }
    </style>
</head>
<body>

<div class="clock" style="background-color: rgb(231, 230, 230);">
    <div id="secLine" class="line main-color second-color" style="transform: rotate(204deg);"></div>
    <div id="minLine" class="line main-color second-color" style="transform: rotate(111.4deg);"></div>
    <div id="hourLine" class="line main-color second-color" style="transform: rotate(519deg);"></div>
    <div class="dot main-color second-color"></div>
    <div class="three main-color second-color"></div>
    <div class="six main-color second-color"></div>
    <div class="nine main-color second-color"></div>
    <div class="twelve main-color second-color"></div>
</div>
<button id="changeView" style="background-color: rgb(88, 39, 51);">Change View</button>

<!-- partial -->
<script>
    // SELECT THE CLOCK HANDS
    const secLine = document.getElementById('secLine');
    const minuteLine = document.getElementById('minLine');
    const hourLine = document.getElementById('hourLine');

    // CREATE TIME FUNCTION
    function setTime() {
        const time = new Date();
        // SECONDS FORMAT
        const sec = time.getSeconds();
        // NOW WE WANT THE HAND TO MOVE ON DEGREE SO THIS NEED SOME MATH :)
        let secDeg = (sec * 360 / 60);
        secLine.style.transform = `rotate(${secDeg}deg)`;
        // MINUTES FORMAT
        const min = time.getMinutes();
        let minDeg = (min * 360 / 60) + (sec * 360 / 60) / 60;
        minuteLine.style.transform = `rotate(${minDeg}deg)`;
        // HOURS FORMAT
        const hour = time.getHours();
        let hourDeg = (hour * 360 / 12) + ((min * 360 / 60) / 12);
        hourLine.style.transform = `rotate(${hourDeg}deg)`;
        // console.log("Hours : " + hour + " minutes : " + min + " seconds : " + sec);
    }

    // CREATE THE CLOCK COUNTER
    setInterval(setTime, 1000);
    // CHANGE THE VIEW BUTTON
    const clock = document.querySelector('.clock');
    const elements = document.querySelectorAll('.clock div');
    const changeView = document.getElementById('changeView');
    const body = document.querySelector('body');
    changeView.addEventListener('click', change);

    // FUNCTION THAT CHANGE THE STYLE
    function change() {
        this.style.backgroundColor = '#582733';
        body.style.backgroundImage = "url('index005/clock-bg-2.jpg')";
        clock.style.backgroundColor = '#e7e6e6';
        for (let i = 0; i < elements.length; i++) {
            elements[i].classList.add('second-color');
        }
    }
</script>

</body>
</html>